<template>
  <view class="inner1 white-bg">

	<view class="individuality-title">交友心声<text>（选填）</text></view>
    <view class="sign-textarea"
      ><u-input
        v-model="form.soliloquy"
        type="textarea"
        clearable="false"
        placeholder="性格特点、家庭情况、想找的对象类型,300字以内（很重要哦）"
    /></view>
    <view class="global-button" @click="save">保存</view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  loadInterestLabels,
  loadPersonalityLabels,
  completeInformation,
} from "@/api/user/user.js";
import { getUserInfo } from "@/util/getInfo.js";
export default {
  data() {
    return {
      character: [],
      interest: [],
      characterList: [],
      interestList: [],
      form: {
        character: "",
        interest: "",
        soliloquy: "",
      },
    };
  },
  mounted() {
    const userinfo = uni.getStorageSync("userInfo");
    if (userinfo) {
      let interest = userinfo.interest.split(";");
      let character = userinfo.character.split(";");
      if (interest) {
        interest.forEach((el, index) => {
          this.interestList.push(el);
        });
      }
      character.forEach((el, index) => {
        this.characterList.push(el);
      });
      this.form.soliloquy = userinfo.soliloquy;
      loadInterestLabels().then((res) => {
        this.interest = res.data;
      });
      loadPersonalityLabels().then((res) => {
        this.character = res.data;
      });
    }
    else{
      // 加载 性格 和 兴趣标签
      loadInterestLabels().then((res) => {
        this.interest = res.data;
      });
      loadPersonalityLabels().then((res) => {
        this.character = res.data;
      });
    }
  },
  methods: {
    save() {
      this.form.character = this.characterList.join(";");
      this.form.interest = this.interestList.join(";");
      // if(this.form.interest)
      completeInformation(this.form).then((res) => {
        if (res.status == 1) {
          getUserInfo();
          this.$refs.uToast.show({
            title: res.message,
            type: "success",
          });
        }
      });
    },
    characterEvent(index) {
      if (this.characterList.indexOf(this.character[index].label) == "-1") {
        this.characterList.push(this.character[index].label);
      } else {
        this.characterList.splice(
          this.characterList.indexOf(this.character[index].label),
          1
        );
      }
    },
    interestEvent(index) {
      if (this.interestList.indexOf(this.interest[index].label) == "-1") {
        this.interestList.push(this.interest[index].label);
      } else {
        this.interestList.splice(
          this.interestList.indexOf(this.interest[index].label),
          1
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
page {
  height: 100vh;

  .inner1 {
    margin-top: 64rpx;
	    width: 100%;
	    padding: 0 30rpx;
  }
}
.individuality-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  line-height: 24px;
  margin-bottom: 20upx;
}
.individuality-title text{
	font-size: 28rpx;
	color: #666666;
}
.individuality-card {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
  border: 1px solid rgba(233, 235, 240, 1);
  padding: 20upx;
  margin-bottom: 20upx;
  .character-icon {
    color: #ffd14d;
    font-size: 24upx;
    line-height: 36upx;
    image {
      display: block;
      width: 48upx;
      height: 48upx;
      margin: 0 auto 10upx;
    }
  }
  .characterList .active {
    background: #f9d05a;
    color: #fff;
    border: 1px solid #f9d05a;
  }
  .interestList .active {
    background: #489eff;
    color: #fff;
    border: 1px solid #489eff;
  }
  .interest-icon {
    color: #4388ff;
    font-size: 24upx;
    line-height: 36upx;
    image {
      display: block;
      width: 56upx;
      height: 42upx;
      margin: 0 auto 10upx;
    }
  }
  .individuality-card-box {
    display: flex;
    justify-content: space-between;
    .individuality-tag-box {
      width: 560upx;
      display: flex;
      flex-wrap: wrap;
      .individuality-tag {
        display: inline-block;
        padding: 6upx 18upx;
        border-radius: 16upx;
        border: 1px solid rgba(223, 225, 236, 1);
        margin-bottom: 10upx;
        margin-right: 12upx;
        font-size: 24rpx;
        box-sizing: border-box;
      }
    }
  }
}
.sign-textarea {
	width: 100%;
	height:140rpx;
	background: #F4F4F4;
	border-radius: 16rpx;
	padding: 28rpx 20rpx;
	font-size: 30upx;
	margin-top: 20upx;
	color:#666666;
	margin-bottom: 60rpx;
}
.global-button {
  position: fixed;
  bottom: 32upx;
  width: 690upx;
  line-height: 80upx;
}
</style>
